<template>
 <div id='app'>
  <div class="img">
    <img src="../assets/bg.png" alt="">
  </div>

  <!-- 游客 -->
  <div class="yk" v-if="Issending">
       <div class="avatar">
       <img src="../assets/avatar.png" alt="">
       </div>
       <p>游客</p>
       <van-button type="primary" to="/login">去登陆</van-button>
  </div>

  <!-- 登录状态 -->
   <div class="yk" v-else>
       <div class="avatar">
       <img :src="`http://124.223.73.204:8080${usemessage.avatar}`" alt="">
       </div>
       <p class="loginyk">{{usemessage.nickname}}</p>
       <van-button type="primary" @click='exit'>退出</van-button>
       <p class="zl">编辑个人资料</p>
  </div>
  <van-grid :column-num="3" :border='false' class="gz">
  <van-grid-item icon="star-o" @click='$router.push("/coll")' text="我的收藏" />
   <van-grid-item icon="wap-home-o" text="我的出租" />
    <van-grid-item  icon="underway-o" text="看房记录" />
     <van-grid-item  icon="send-gift-o" text="成为房主" />
      <van-grid-item  icon="friends-o" text="个人资料" />
       <van-grid-item  icon="service-o" text="联系我们" />
</van-grid>
<div class="footer">
  <img src="../assets/join.png" alt="">
</div>
 </div>
</template>

<script>
import {getToken,delToken} from '../until/stroage'
import {user} from '../api/user'
export default {
 data () {
 return {
      Issending:true,
      usemessage:''
   }
 },
  created(){
    this.User()
    console.log('1');
  },
 components: {},
 methods: {
  async User(){
      const token= await getToken()
      if(token){
      const res = await user()
      this.usemessage=res.data.body
      this.Issending=false
      }
  },
  exit(){
        this.$dialog.confirm({
        title: '提示',
        message: '你确认要退出吗？',
      })
        .then(() => {
          // on confirm
          delToken()
          this.Issending=true
        })
        .catch(() => {
          // on cancel
        });
    
    console.log('1');
  }
 }
}
</script>

<style scoped>
#app{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.img img{
  width: 100%;
}
.yk{
  box-shadow: 0px 0px 10px 3px #ddd;
  width: 320px;
  height: 165px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  position: relative;
  margin-top: -60px;
  background-color: white;
}
.loginyk{
  margin-top: 50px;
}
.yk button{
  width: 75px;
  height: 30px;
  font-size: 13px;
}
.zl{
  font-size: 12px;
  color: #999999;
}
.yk p{
  margin: 10px 0;
}
.avatar{
  width: 70px;
  height: 70px;
  background-color: snow;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 2px 2px #bdbdbd;
  position: absolute;
  margin-top: -160px;
}
.avatar img{
  width: 60px;
  height: 60px;
  
}
.gz{
  margin-top: 15px;
}
.footer{
  display: flex;
  justify-content: center;
  margin-top: 15px;
}
.footer img{
  width: 90%;
}
</style>